import React from 'react';
import ReactDOM from 'react-dom';
// class App extends React.Component{
//   // constructor(){
//   //   super()
//   //   this.addSum= this.addSum.bind(this)
//   // }
//   state={
//     count:0
//   }
//   addSum =()=>{
//     this.setState({
//       count:this.state.count+1
//     })
//   }
//   render(){
//     return(
//       <div>
//         <p>{this.state.count}</p>
//         <button onClick={this.addSum}>+1</button>
//         {/* <button onClick={()=>this.addSum}>+1</button> */}
//       </div>
//     )
//   }
// }
// class App extends React.Component{
//   state={
//     txt:'',
//     content:'',
//     city:'',
//     checkBos:'',
//     count:0
//   }
  // txtChange=(e)=>{
  //   console.log(e)
  //   this.setState({
  //     txt:e.target.value
  //   })
  // }
  // contentChange=(e)=>{
  //   this.setState({
  //     content:e.target.value
  //   })
  // }
  // cityChange=(e)=>{
  //   this.setState({
  //     city:e.target.value
  //   })
  // }
  // checkChange=(e)=>{
  //   this.setState({
  //     checkBos: e.target.checked
  //   })
  // }
//   handlerChange = (e)=>{
//     const target = e.target
//     const value  = target.type ==='value'? target.value:target.checked
//     const name = target.name
//     this.setState({
//       [name]:value
//       // [name] 要接受的元素的state状态
//       //value = e.target.xxx
//     })
//   }
//   render(){
//     return(
//       <div>
//         <input type='text' name="txt"
//         value={this.state.txt} onChange={this.handlerChange}>
//         </input>
//         <p>{this.state.txt}</p>
//         <textarea name="content" value={this.state.content} onChange={this.handlerChange}></textarea>
//         <p>{this.state.content}</p>
//         <select name="city" value={this.state.city} onChange={this.handlerChange}>
//           <option value='sh'>上海</option>
//           <option value='bj'>北京</option>
//         </select>
//         <p>{this.state.city}</p>
//         <input name="checkBos" type="checkbox" checked={this.state.checkBos}
//         onChange={this.handlerChange}></input>
//         <p>{this.state.checked}</p>
//       </div>
//     )
//   }
// }
/**
 * 评论列表案例
 */
// class App1 extends React.Component {
//   // 初始化状态
//   state = {
//     comments: [
//       // { id: 1, name: 'jack', content: '沙发！！！' },
//       // { id: 2, name: 'rose', content: '板凳~' },
//       // { id: 3, name: 'tom', content: '楼主好人' }
//     ],

//     // 评论人
//     userName: '',
//     // 评论内容：
//     userContent: ''
//   }
//   // 渲染评论列表：
//   renderList() {
//     const { comments } = this.state

//     if (comments.length === 0) {
//       return <div className="no-comment">暂无评论，快去评论吧~</div>
//     }

//     return (
//       <ul>
//         {comments.map(item => (
//           <li key={item.id}>
//             <h3>评论人：{item.name}</h3>
//             <p>评论内容：{item.content}</p>
//           </li>
//         ))}
//       </ul>
//     )
//   }

//   // 处理表单元素值
//   handleForm = e => {
//     const { name, value } = e.target

//     this.setState({
//       [name]: value
//     })
//   }

//   // 发表评论：
//   addComment = () => {
//     const { comments, userName, userContent } = this.state

//     // 非空校验
//     if (userName.trim() === '' || userContent.trim() === '') {
//       alert('请输入评论人和评论内容')
//       return
//     }

//     // 将评论信息添加到state中
//     const newComments = [
//       {
//         id: Math.random(),
//         name: userName,
//         content: userContent
//       },
//       ...comments
//     ]

//     // 文本框的值如何清空？ 要清空文本框只需要将其对应的state清空即可
//     this.setState({
//       comments: newComments,
//       userName: '',
//       userContent: ''
//     })
//   }

//   render() {
//     const { userName, userContent } = this.state

//     return (
//       <div className="app">
//         <div>
//           <input
//             className="user"
//             type="text"
//             placeholder="请输入评论人"
//             value={userName}
//             name="userName"
//             onChange={this.handleForm}
//           />
//           <br />
//           <textarea
//             className="content"
//             cols="30"
//             rows="10"
//             placeholder="请输入评论内容"
//             value={userContent}
//             name="userContent"
//             onChange={this.handleForm}
//           />
//           <br />
//           <button onClick={this.addComment}>发表评论</button>
//         </div>

//         {/* 通过条件渲染决定渲染什么内容： */}
//         {this.renderList()}
//       </div>
//     )
//   }
// }
// ReactDOM.render(<App/>,document.getElementById("root"))